<template>
    <div class="list-hot">
        <div class="hotBox">
            <div v-for="item in listData" :key="item.id" class="box-border">
                <ul class="box-border flex flex-col w-full px-16" @click="onItemClick(item)">
                    <li class="flex items-center justify-between mb-16">
                        <p class="flex items-end items-center">
                            <strong class="font-400">{{ item.symbol && item.symbol.toUpperCase() || '--' }}</strong>
                            <span class="grey font-400">{{ item.name && item.name.replace(item.symbol.toUpperCase(),'') || '--'}}</span>
                            <span class="font-18" :class="item.change_ratio >0 ? 'green' : 'red'">{{item.change_ratio>0
                                ?
                                '+' : ''}}{{item.change_ratio}}%</span>
                        </p>
                    </li>
                    <li class="mb-16">
                        <p>
                            <strong class="font-700 font-36" :class="item.change_ratio >0 ? 'green' : 'red'">{{
                                item.close || '--' }}</strong><br />
                            <span class="grey font-400 font-22">≈ {{ currency.currency_symbol }}{{ item.close && (item.close *
                                currency.rate).toFixed(2) || '--'
                                }}</span>
                        </p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { fixDate } from "@/utils/utis";
export default {
    data() {
        return {
            fixDate
        }
    },
    components: {
    },
    props: {
        listData: {
            type: Array,
            default() {
                return []
            }
        }
    },
    computed: {
        ...mapGetters({ currency: 'home/currency' })
    },
    methods: {
        onItemClick(item) { // 点击进入合约交易
            this.$router.push({
                path: `/trendDetails/${item.symbol}`,
            })
        }
    }
}
</script>

<style lang="scss" scoped>





.list-hot{
    font-size: 26px;
    p{
        color: #868D9A;
    }
}
.red{
    color: #E35561
}
.green{
    color: #5EBA89
}
.grey{
    color: #868D9A
}
.hotBox{
    display: flex;
    >div{
        flex: 1;
    }
}
</style>